<template>
  <div class="tabBar">
    <van-tabbar class="van-tabbar" v-model="currentIndex" active-color="#ff9854" route>
      <template v-for="(item, index) in tabbarData" key="index">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img v-if="currentIndex !== index" :src="getAssetUrl(item.img)" />
            <img v-else :src="getAssetUrl(item.imageActive)" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
  import tabbarData from '@/assets/data/tabBar'
  import { getAssetUrl } from '@/utils/assets_img'
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const currentIndex = ref(0)
  watch(route, (newRoute) => {
    const index = tabbarData.findIndex((item) => item.path === newRoute.path)
    if (index === -1) return
    currentIndex.value = index
  })
</script>

<style lang="less" scoped>
  .tabBar img {
    height: 26px;
  }
</style>
